/*
 * Copyright 2021 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package app.delish.details

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.darkColors
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import app.delish.details.R
import com.elbehiry.model.RecipesItem

/**
 * 营养比例环形图组件：以环形百分比形式展示食谱的三大营养素比例
 *
 * 设计说明：
 * 以可视化方式展示蛋白质、碳水化合物和脂肪的比例分布
 * 每个营养素显示在独立的灰色圆环中，中央显示百分比数值
 *
 * @param recipeItem 食谱数据对象（需包含三大营养素的百分比）
 */
@Composable
fun RecipeCaloric(recipeItem: RecipesItem) {
    // 水平布局容器（三个圆环并列）
    Row(
        modifier = Modifier
            .fillMaxWidth()         // 占满宽度
            .padding(vertical = 4.dp)  // 垂直间距
    ) {
        // 1. 蛋白质占比
        NutrientCircle(
            label = stringResource(id = R.string.protein),  // 蛋白质标签
            percentage = recipeItem.percentProtein ?: 0.0,    // 蛋白质百分比（空值处理为0）
            modifier = Modifier.weight(1f)                 // 等宽分配
        )

        // 2. 碳水化合物占比
        NutrientCircle(
            label = stringResource(id = R.string.carbs),     // 碳水标签
            percentage = recipeItem.percentCarbs ?: 0.0,      // 碳水百分比
            modifier = Modifier.weight(1f)
        )

        // 3. 脂肪占比
        NutrientCircle(
            label = stringResource(id = R.string.fat),       // 脂肪标签
            percentage = recipeItem.percentFat ?: 0.0,         // 脂肪百分比
            modifier = Modifier.weight(1f)
        )
    }
}

/**
 * 营养素环形图组件（用于展示单个营养素的百分比）
 *
 * @param label 营养素名称（如"蛋白质"）
 * @param percentage 百分比数值（0-100）
 * @param modifier 布局修饰符
 */
@Composable
private fun NutrientCircle(
    label: String,
    percentage: Double,
    modifier: Modifier = Modifier
) {
    // 垂直布局容器（圆环+标签）
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,  // 内容水平居中
        modifier = modifier
    ) {
        // 圆形容器
        Box(
            modifier = Modifier
                .clip(CircleShape)     // 圆形裁剪
                .requiredSize(110.dp)  // 固定尺寸
                .padding(16.dp)        // 内边距
        ) {
            // 绘制灰色圆环（Canvas绘制）
            Canvas(modifier = Modifier.fillMaxSize()) {
                drawCircle(
                    color = Color.Gray,         // 灰色圆环
                    style = Stroke(1.dp.toPx()) // 1dp线宽
                )
            }

            // 圆环中央的百分比文本
            Text(
                text = "$percentage %",  // 百分比数值
                color = Color.White,      // 白色文字
                style = MaterialTheme.typography.subtitle2,  // 副标题样式
                modifier = Modifier
                    .align(Alignment.Center)  // 居中对齐
                    .padding(10.dp)            // 内边距
            )
        }

        // 营养素名称标签
        Text(
            text = label,  // 营养分类名称
            color = Color.White,
            style = MaterialTheme.typography.subtitle2,
            fontSize = 12.sp  // 较小字号
        )
    }
}

/**
 * 预览函数：展示三种营养素的环形图表和多种数据场景
 */
@Preview(showBackground = true, backgroundColor = 0xFF333333)
@Composable
private fun RecipeCaloricPreview() {
    // 健康食谱（蛋白质高）
    val proteinRichRecipe = RecipesItem(
        id = 1,
        percentProtein = 40.0,
        percentCarbs = 30.0,
        percentFat = 30.0
    )

    // 高碳水化合物食谱（适合增肌）
    val carbRichRecipe = RecipesItem(
        id = 2,
        percentProtein = 25.0,
        percentCarbs = 55.0,
        percentFat = 20.0
    )

    // 高脂肪食谱（生酮饮食）
    val fatRichRecipe = RecipesItem(
        id = 3,
        percentProtein = 20.0,
        percentCarbs = 5.0,
        percentFat = 75.0
    )

    // 均衡食谱
    val balancedRecipe = RecipesItem(
        id = 4,
        percentProtein = 33.0,
        percentCarbs = 34.0,
        percentFat = 33.0
    )

    // 在深色主题下预览不同食谱
    MaterialTheme(colors = darkColors()) {
        Column(
            modifier = Modifier.background(Color(0xFF222222))
        ) {
            Text("健康食谱（蛋白质高）:", color = Color.White)
            RecipeCaloric(proteinRichRecipe)

            Spacer(modifier = Modifier.height(24.dp))

            Text("高碳水化合物食谱:", color = Color.White)
            RecipeCaloric(carbRichRecipe)

            Spacer(modifier = Modifier.height(24.dp))

            Text("高脂肪食谱（生酮饮食）:", color = Color.White)
            RecipeCaloric(fatRichRecipe)

            Spacer(modifier = Modifier.height(24.dp))

            Text("均衡食谱:", color = Color.White)
            RecipeCaloric(balancedRecipe)
        }
    }
}